<template>
    <div class="screen">
        <header class="topbar">
            <button class="icon-btn" @click="goBack" aria-label="back">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                </svg>
            </button>
            <div class="title">账号信息</div>
        </header>

        <!-- 可滚动内容区域 -->
        <div class="scrollable-content">
            <!-- 头像部分 -->
            <section class="avatar-section">
                <div class="avatar-wrapper">
                    <img :src="avatarUrl" alt="avatar" class="avatar" />
                    <button class="camera-btn" @click="noop">
                        <svg viewBox="0 0 24 24" width="20" height="20">
                            <path fill="currentColor" d="M12 12.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm7.5-4.5V19H4.5V8h15zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                        </svg>
                    </button>
                </div>
            </section>

            <!-- 账号详情 -->
            <section class="info-section">
                <div class="info-item">
                    <span class="info-label">账号</span>
                    <span class="info-value">微信: 困困小董</span>
                </div>
                <div class="info-item">
                    <span class="info-label">昵称</span>
                    <span class="info-value">rubbishGraduateFrom-zjitc (不上岸不改名)</span>
                </div>
                <div class="info-item">
                    <span class="info-label">手机号</span>
                    <span class="info-value highlight">待补充</span>
                </div>
            </section>

            <!-- 分割线 -->
            <div class="divider"></div>

            <!-- 平台绑定 -->
            <section class="bind-section">
                <p class="bind-hint">绑定以下平台后亦可用于登录</p>
                <div class="info-item">
                    <span class="info-label">QQ</span>
                    <span class="info-value highlight">立即绑定</span>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserAvatar } from '@/composables/useUserAvatar.js'

const router = useRouter()
const { avatarUrl } = useUserAvatar()

function goBack() { router.back() }
function noop() {}
</script>

<style scoped>
.screen { 
    position: fixed; 
    inset: 0; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

.topbar { 
    height: 56px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 12px; 
    padding: 0 16px; 
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
    position: relative;
}

.icon-btn { 
    position: absolute;
    left: 16px;
    border: none; 
    background: transparent; 
    cursor: pointer; 
    color: #111827;
    padding: 4px;
    display: flex;
    align-items: center;
}

.title { 
    font-weight: 700; 
    font-size: 18px; 
    color: #111827;
}

/* 可滚动内容区域 */
.scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
    -webkit-overflow-scrolling: touch;
}

/* 头像部分 */
.avatar-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 32px;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.camera-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111827;
    transition: transform 0.2s;
}

.camera-btn:hover {
    transform: scale(1.05);
}

/* 信息部分 */
.info-section {
    margin-bottom: 16px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 16px;
    color: #111827;
    font-weight: 500;
}

.info-value {
    font-size: 16px;
    color: #6b7280;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.info-value.highlight {
    color: #ff6a00;
    font-weight: 500;
    cursor: pointer;
}

.info-value.highlight:hover {
    opacity: 0.8;
}

/* 分割线 */
.divider {
    height: 1px;
    background: #f1f5f9;
    margin: 16px 0;
}

/* 绑定部分 */
.bind-section {
    margin-top: 16px;
}

.bind-hint {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
    padding: 0;
}
</style>













